<template>
  <div id="name">
    <div class="wl-body">
      <div class="bdds mtpo">
        <div>
          <div
            class="mtp slink"
            :class="[
              acchange == 0 ? 'topchanger' : '',
              acchange == 1 ? 'topchanger2' : '',
            ]"
          >
            <div
              class="xks scllow"
              :class="[acchange == 0 ? 'active' : '']"
              @click="changers(0)"
            >
              {{ $t("m.lsgd") }}
            </div>
            <div
              class="xks scllow"
              :class="[acchange == 1 ? 'active' : '']"
              @click="changers(1)"
            >
              {{ $t("m.tjgd") }}
            </div>
          </div>
        </div>
        <div v-if="acchange == 0">
          <div class="mtpo slink xuankuang">
            <div
              class="xksr scllow"
              :class="[acchangew == 0 ? 'active' : '']"
              @click="changersw(0)"
            >
              {{ $t("m.qbgd") }}
            </div>
            <div
              class="xksz scllow"
              :class="[acchangew == 1 ? 'active' : '']"
              @click="changersw(1)"
            >
              {{ $t("m.dkfcl") }}
            </div>
            <div
              class="xksl scllow"
              :class="[acchangew == 2 ? 'active' : '']"
              @click="changersw(2)"
            >
              {{ $t("m.dwcl") }}
            </div>
          </div>
          <div class="slideIn" v-if="show">
            <van-list
              v-model="loadings"
              :finished="finisheds"
              :finished-text="$t('m.nomore')"
              @load="onLoad"
            >
              <div
                class="link-item bottml"
                @click="goto('gdxq', item)"
                v-for="(item, k) in tddata"
                :key="k"
              >
                <div class="slink ggn m-1">
                  <div class="flex1">
                    {{
                      item.status == 1
                        ? $t("m.ddcl")
                        : item.status == 2
                        ? $t("m.yjj")
                        : item.status == 3
                        ? $t("m.ywc")
                        : $t("m.wjj")
                    }}
                  </div>
                  <div class="fl1 t-right">
                    <img src="../assets/timg/r.png" alt="" class="zl-r" />
                  </div>
                </div>

                <div class="gg-con gg m-1">{{ item.title }}</div>
                <div class="slink gg m-1">
                  <div>{{ item.email }}</div>
                  <div>{{ item.createTime }}</div>
                </div>
              </div>
            </van-list>
          </div>
        </div>
        <div v-else>
          <div class="gd">
            <div class="gg-t ml-3">{{ $t("m.yx") }}</div>
            <div>
              <input
                type="email"
                class="embg"
                v-model="email"
                :placeholder="$t('m.qsrndyx')"
                @change="upchenger()"
              />
            </div>
          </div>
          <div class="gd">
            <div class="gg-t ml-3">{{ $t("m.wt") }}</div>
            <div>
              <textarea
                cols="8"
                rows="20"
                v-model="csonst"
                class="bkly"
              ></textarea>
            </div>
            <div class="gg t-left ml-3">{{ $t("m.wtpi") }}</div>
          </div>
          <div class="gd">
            <div class="gg-t ml-3">{{ $t("m.wtjt") }}</div>
            <div class="gg-t m-1 ml-3">
              <van-uploader
                v-model="fileList"
                :after-read="afterRead"
                :max-size="500 * 1024"
                @oversize="onOversize"
                ref="uploadImg"
              >
                <img src="../assets/timg/addimg.png" alt="" @click="up" />
                <template #preview-cover="{ file }">
                  <div class="preview-cover van-ellipsis">{{ file.name }}</div>
                </template>
              </van-uploader>
            </div>
            <div class="bdds">
              <div class="btnsd scllow w35 mtpo" @click="gdtj()">
                {{ $t("m.tj") }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "name",
  data() {
    return {
      isPublish: false,
      acchange: 0,
      acchangew: 0,
      suoding: false,
      tddata: [],
      fileList: [],
      imglist: [],
      email: "",
      csonst: "",
      geshi: false,
      show: true,
      loadings: false,
      finisheds: false,
      pageNumss: 1,
    };
  },
  created() {},
  mounted() {
    if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL);
      window.addEventListener("popstate", this.goBack, false);
    }
  },
  destroyed() {
    window.removeEventListener("popstate", this.goBack, false);
  },
  methods: {
    up() {
      this.$refs.uploadImg.chooseFile();
    },
    upchenger() {
      var email = this.email;
      var reg = /^([a-zA-Z]|[0-9])(\w|-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
      if (reg.test(email)) {
        this.geshi = true;
      } else {
        this.geshi = false;
        this.$toast(this.$i18n.t("m.yxgs"));
      }
    },
    goBack() {
      this.$router.replace({ path: "/" });
    },
    guanbi() {
      this.$router.go(-1);
    },
    changers(val) {
      this.acchange = val;
      if (val == 0) {
        this.changersw(val);
      } else {
        (this.fileList = []),
          (this.imglist = []),
          (this.email = ""),
          (this.suoding = false);
      }
    },
    changersw(val) {
      this.acchangew = val;
      this.show = false;
      this.tddata = [];
      this.pageNumss = 1;
      this.onLoad();
    },

    onOversize() {
      this.$toast(this.$i18n.t("m.imgmx"));
    },
    goto(val, data) {
      this.$router.push({ path: val });
      sessionStorage.setItem("gddata", data.id);
      console.log(data.id);
    },
    gdtj() {
      if (!this.email || !this.csonst) {
        this.$toast(this.$i18n.t("m.xxtxwz"));
        return;
      }
      var reg = /^([a-zA-Z]|[0-9])(\w|-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
      if (reg.test(this.email)) {
        this.geshi = true;
      } else {
        this.geshi = false;
      }
      if (!this.geshi) {
        this.$toast(this.$i18n.t("m.yxgs"));
        return;
      }
      if (this.suoding) {
        return;
      } else {
        this.suoding = true;
        if (this.$store.getters.nameid) {
          let datas = {
            uid: this.$store.getters.nameid,
            email: this.email,
            title: this.csonst,
            imgs: this.imglist.join(","),
          };
          this.$post({
            url: "workOrder/createWorkOrder",
            data: datas,
            callback: (data) => {
              this.$nextTick(function () {
                var s = data.data;
                if (s) {
                  this.$toast(this.$i18n.t("m.gdtjsuc"));
                  this.changers(0);
                } else {
                  this.suoding = false;
                  this.$toast(data.message);
                }
              });
            },
          }).catch(() => {
            this.suoding = false;
            this.$toast(this.$i18n.t("m.errordata"));
          });
        } else {
          this.getuid();
          this.suoding = false;
        }
      }
    },
    getuid() {
      this.$get({
        url: "wms-wallet/user-game-info/" + this.$store.getters.userWallet,
        data: {},
        callback: (data) => {
          this.$nextTick(function () {
            if (data.data) {
              this.$store.commit("nameid", data.data.id);
              this.onLoad();
            }
          });
        },
      }).catch(() => {
        this.$toast(this.$i18n.t("m.errordata"));
      });
    },
    afterRead(file) {
      var f = new FormData();
      f.append("file", file.file);
      this.$post({
        url: "file/qCloudMultipartFileUpload",
        data: f,
        callback: (data) => {
          this.$nextTick(function () {
            var s = data;
            if (s) {
              this.imglist.push(s);
              console.log(this.imglist);
            } else {
              this.$toast(data.message);
            }
          });
        },
      }).catch(() => {
        this.$toast(this.$i18n.t("m.errordata"));
      });
    },

    onLoad() {
      if (this.$store.getters.nameid) {
        var datas = {
          params: {
            uid: this.$store.getters.nameid,
            pageSize: 10,
            pageNum: this.pageNumss,
            status: this.acchangew,
          },
        };
        this.$get({
          url: "workOrder/getTitleList",
          data: datas,
          callback: (data) => {
            this.$nextTick(function () {
              var list = data.data;
              if (list) {
                this.show = true;
                if (this.pageNumss > 1) {
                  this.tddata = [...this.tddata, ...list];
                } else {
                  this.tddata = list;
                }
                this.loadings = false;
                if (list.length != 0) {
                  this.pageNumss++;
                } else {
                  this.finisheds = true;
                }
              } else {
                this.$toast(data.msg);
              }
            });
          },
        }).catch(() => {
          this.$toast(this.$i18n.t("m.errordata"));
        });
      } else {
        this.getuid();
      }
    },
  },
};
</script>

<style>
.preview-cover {
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 4px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
}
</style>
